﻿<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        关于我们 > 在线留言
    </title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="generator" content="" data-variable="/,cn,10001,,10001,res032" />
    <link rel='stylesheet' href='css/index.css'>

    <style>
        .imgstyle {
            width: 100%;
            /* 或者使用具体的宽度值 */
            height: 200px;
            /* 确保高度自适应 */
        }
    </style>
</head>

<body class="met-navfixed">
    <header id="header" class="header-fixed">
        <div class="container">
            <ul class="head-list">
                <li class="left tel">
                    <img src="images/1514354107.png" alt="">
                    <span>
                        全国咨询热线：
                    </span>
                    <em>
                        400-123-4567
                    </em>
                </li>
                <li class="right">
                    <ul>
                        <li>
                            <img src="images/1514355047.png" alt="一流的服务">
                            <span>
                                一流的服务
                            </span>
                        </li>
                        <li>
                            <img src="images/1514354958.png" alt="透明的价格">
                            <span>
                                透明的价格
                            </span>
                        </li>
                        <li>
                            <img src="images/1514354817.png" alt="重信守誉">
                            <span>
                                重信守誉
                            </span>
                        </li>
                        <li>
                            <img src="images/1514354461.png" alt="优质的技师">
                            <span>
                                优质的技师
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>
    <nav class="navbar navbar-default met-nav navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                        data-target="#navbar-default-collapse" data-toggle="collapse">
                        <span class="sr-only">
                            Toggle navigation
                        </span>
                        <span class="hamburger-bar">
                        </span>
                    </button>
                    <a href="#" ​ class="navbar-brand navbar-logo vertical-align" title="中电金信有限公司(自适应手机端)">
                        <h1 class='hide'>
                            中电金信有限公司(自适应手机端)
                        </h1>
                        <div class="vertical-align-middle">
                            <img src="images/logom.png" alt="中电金信有限公司(自适应手机端)" title="中电金信有限公司(自适应手机端)" />
                        </div>
                    </a>
                    <h2 class='hide'>
                    </h2>
                </div>
                <div class="collapse navbar-collapse navbar-collapse-toolbar" id="navbar-default-collapse">
                    <ul class="nav navbar-nav navbar-right navlist">
                        <li>
                            <a href="index.html" ​ title="网站首页" class="link">
                                网站首页
                            </a>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link active" data-toggle="dropdown" data-hover="dropdown"
                                aria-expanded="false" href="about.html">
                                关于我们
                                <span class="caret">
                                </span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet">
                                <li>
                                    <a href="about.html" ​ class="" title="公司简介">
                                        公司简介
                                    </a>
                                </li>
                                <li>
                                    <a href="message.html" ​ class="" title="在线留言">
                                        在线留言
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown"
                                aria-expanded="false" href="product.html">
                                优质水会
                                <span class="caret">
                                </span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet">
                                <li>
                                    <a href="productcate1.html" ​ class="" title="丽丝">
                                        丽丝水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate2.html" ​ class="" title="威美斯">
                                        威美斯水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate3.html" ​ class="" title="贝帮">
                                        贝帮水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate4.html" ​ class="" title="月荷湾">
                                        月荷湾水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate5.html" ​ class="" title="月荷湾">
                                        其它水会
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown margin-left-20">
                            <a class=" link " href="contact.html">
                                联系我们
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet">
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="met-banner banner-ny-h" data-height='' style=''>
        <div class="slick-slide">
            <img class="cover-image imgstyle" src="images/weimeisi1.jpg" sizes="(max-width: 767px) 767px" alt="在线留言">
        </div>
    </div>
    <div class="met-column-nav ">
        <div class="container">
            <div class="row">
                <div class="sidebar-tile">
                    <ul class="met-column-nav-ul invisible-xs">
                        <li>
                            <a href="about.html" ​ class="link ">
                                公司简介
                            </a>
                        </li>
                        <li>
                            <a href='message.html' class='link active'>
                                在线留言
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--技师信息提交表单开始-->
    <div class="form-container">
        <h1>技师信息提交</h1>
        <form id="technicianForm">
            <!-- 姓名和手机号行 -->
            <div class="inline-form-row">
                <div class="inline-form-item">
                    <div class="inline-label-input">
                        <span class="required">*</span>
                        <label for="name">姓名：</label>
                        <input type="text" id="name" name="name" placeholder="请输入姓名" required>
                        <div id="nameError" class="error-message"></div>
                    </div>
                </div>

                <div class="inline-form-item">
                    <div class="inline-label-input">
                        <span class="required">*</span>
                        <label for="phone">手机号码：</label>
                        <input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required>
                        <div id="phoneError" class="error-message"></div>
                    </div>
                </div>
            </div>

            <!-- 个人照片上传 -->
            <div class="form-section">
                <h3><span class="required">*</span>个人照片</h3>
                <div class="file-upload" id="mainImgUpload">
                    <p>点击或拖拽上传个人照片</p>
                    <p class="hint">支持JPG/PNG格式，大小不超过5MB</p>
                    <input type="file" id="mainImg" name="mainImg" accept="image/jpeg,image/png" style="display:none;">
                </div>
                <div id="mainImgError" class="error-message"></div>
                <div class="preview-container" id="mainImgPreview" style="display:none;">
                    <img class="preview-img" id="mainImgPreviewImg">
                    <button type="button" class="remove-btn">×</button>
                </div>
            </div>

            <!-- 微信二维码上传 -->
            <div class="form-section">
                <h3><span class="required">*</span>微信二维码</h3>
                <div class="file-upload" id="listImgUpload">
                    <p>点击或拖拽上传微信二维码</p>
                    <p class="hint">支持JPG/PNG格式，大小不超过5MB</p>
                    <input type="file" id="listImg" name="listImg" accept="image/jpeg,image/png" style="display:none;">
                </div>
                <div id="listImgError" class="error-message"></div>
                <div class="preview-container" id="listImgPreview" style="display:none;">
                    <img class="preview-img" id="listImgPreviewImg">
                    <button type="button" class="remove-btn">×</button>
                </div>
            </div>

            <!-- 留言内容 -->
            <div class="form-section">
                <h3><span class="required">*</span>留言内容</h3>
                <textarea id="message" name="message" placeholder="请输入留言内容" required></textarea>
                <div id="messageError" class="error-message"></div>
            </div>

            <!-- 全局API错误提示 -->
            <div id="apiError" class="error-message" style="text-align:center;display:none;"></div>

            <!-- 提交按钮 -->
            <div class="form-submit">
                <button type="submit" id="submitBtn" class="submit-btn">提交信息</button>
            </div>
        </form>
    </div>
    <!--技师信息提交表单结束-->

    <footer>
        <div class="container text-center">
            <p>
                CopyRight &copy; 2020-2030 中电金信有限公司 版权所有
            </p>
            <p>
                ICP备XXXXXXXX号
            </p>
        </div>
    </footer>
    <button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide">
        <i class="icon wb-chevron-up" aria-hidden="true">
        </i>
    </button>
    <script src="js/index.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 文件上传点击事件
            document.getElementById('mainImgUpload').addEventListener('click', function () {
                document.getElementById('mainImg').click();
            });
            document.getElementById('listImgUpload').addEventListener('click', function () {
                document.getElementById('listImg').click();
            });

            // 图片上传处理
            document.getElementById('mainImg').addEventListener('change', function (e) {
                handleImageUpload(e, 'mainImg');
            });
            document.getElementById('listImg').addEventListener('change', function (e) {
                handleImageUpload(e, 'listImg');
            });

            // 移除图片事件绑定
            document.querySelectorAll('.remove-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    const fieldName = this.closest('.preview-container').id.replace('Preview', '');
                    removeImage(fieldName);
                });
            });

            // 表单提交处理
            const form = document.getElementById('technicianForm');
            const submitBtn = document.querySelector('.submit-btn');

            form.addEventListener('submit', async function (e) {
                e.preventDefault();

                // 验证表单
                if (!validateForm()) return;

                try {
                    submitBtn.disabled = true;
                    submitBtn.textContent = '提交中...';

                    const formData = new FormData(form);

                    // 发送请求
                    const response = await fetch('http://47.108.230.236:9010/html/upload', {
                        method: 'POST',
                        body: formData
                    });

                    // 处理响应
                    const responseText = await response.text();
                    console.log('服务器响应:', responseText);

                    try {
                        const data = JSON.parse(responseText);
                        if (data.success !== false) {
                            showSuccessMessage('提交成功！');
                            resetForm();
                            return;
                        }
                        throw new Error(data.message || '服务器返回错误');
                    } catch (e) {
                        // 即使不是JSON格式，只要状态码是200也视为成功
                        if (response.ok) {
                            showSuccessMessage('提交成功！');
                            resetForm();
                        } else {
                            throw new Error(responseText || `请求失败，状态码: ${response.status}`);
                        }
                    }

                } catch (error) {
                    console.error('提交错误:', error);

                    let errorMsg = error.message;
                    if (error.message.includes('Failed to fetch')) {
                        errorMsg = '网络连接失败，请检查网络';
                    } else if (error.message.includes('404')) {
                        errorMsg = '请求地址不存在(404)';
                    }

                    showApiError(`提交失败: ${errorMsg}`);

                } finally {
                    submitBtn.disabled = false;
                    submitBtn.textContent = '提交信息';
                }
            });

            // 手机号实时验证
            document.getElementById('phone').addEventListener('input', validatePhone);
        });

        /* ===== 以下工具函数保持不变 ===== */
        function handleImageUpload(event, fieldName) {
            const file = event.target.files[0];
            if (!file) return;

            if (!file.type.match('image/(jpeg|png|jpg)')) {
                showError(fieldName + 'Error', '请上传JPG或PNG格式的图片');
                resetFileInput(fieldName);
                return;
            }

            if (file.size > 5 * 1024 * 1024) {
                showError(fieldName + 'Error', '图片大小不能超过5MB');
                resetFileInput(fieldName);
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById(fieldName + 'PreviewImg').src = e.target.result;
                document.getElementById(fieldName + 'Preview').style.display = 'flex';
                hideError(fieldName + 'Error');
            };
            reader.readAsDataURL(file);
        }

        function removeImage(fieldName) {
            resetFileInput(fieldName);
            document.getElementById(fieldName + 'Preview').style.display = 'none';
            showError(fieldName + 'Error', '请上传' + (fieldName === 'mainImg' ? '个人照片' : '微信二维码'));
        }

        function resetFileInput(fieldName) {
            document.getElementById(fieldName).value = '';
            document.getElementById(fieldName + 'PreviewImg').src = '';
        }

        function validateForm() {
            let isValid = true;
            hideAllErrors();

            const name = document.getElementById('name').value.trim();
            if (!name) {
                showError('nameError', '请输入姓名');
                isValid = false;
            }

            if (!validatePhone()) {
                isValid = false;
            }

            ['mainImg', 'listImg'].forEach(field => {
                if (!document.getElementById(field).files[0]) {
                    showError(field + 'Error', '请上传' + (field === 'mainImg' ? '个人照片' : '微信二维码'));
                    isValid = false;
                }
            });

            const message = document.getElementById('message').value.trim();
            if (!message) {
                showError('messageError', '请输入留言内容');
                isValid = false;
            }

            return isValid;
        }

        function validatePhone() {
            const phone = document.getElementById('phone').value.trim();
            const phoneRegex = /^1[3-9]\d{9}$/;

            if (!phone) {
                showError('phoneError', '请输入手机号码');
                return false;
            }

            if (!phoneRegex.test(phone)) {
                showError('phoneError', '请输入有效的11位手机号码');
                return false;
            }

            hideError('phoneError');
            return true;
        }

        function showSuccessMessage(message) {
            alert(message); // 简单使用alert提示成功
        }

        function showApiError(message) {
            const errorElement = document.getElementById('apiError') || createMessageElement('apiError', 'error-message');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
            errorElement.scrollIntoView({ behavior: 'smooth' });
        }

        function createMessageElement(id, className) {
            const div = document.createElement('div');
            div.id = id;
            div.className = className;
            div.style.textAlign = 'center';
            div.style.margin = '20px 0';
            div.style.padding = '10px';
            div.style.borderRadius = '4px';
            div.style.display = 'none';
            document.querySelector('.form-container').appendChild(div);
            return div;
        }

        function showError(id, message) {
            const errorElement = document.getElementById(id);
            if (errorElement) {
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }
        }

        function hideError(id) {
            const errorElement = document.getElementById(id);
            if (errorElement) {
                errorElement.style.display = 'none';
            }
        }

        function hideAllErrors() {
            document.querySelectorAll('.error-message').forEach(el => {
                el.style.display = 'none';
            });
        }

        function resetForm() {
            document.getElementById('technicianForm').reset();
            ['mainImg', 'listImg'].forEach(field => {
                document.getElementById(field + 'Preview').style.display = 'none';
                document.getElementById(field + 'PreviewImg').src = '';
            });
            hideAllErrors();
        }
    </script>
    
    <style>
        /* 基础表单样式 */
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        }

        .form-container h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 28px;
        }

        /* 行内表单行 */
        .inline-form-row {
            display: flex;
            gap: 30px;
            margin-bottom: 20px;
        }

        .inline-form-item {
            flex: 1;
        }

        .inline-label-input {
            display: flex;
            align-items: center;
        }

        .inline-label-input label {
            white-space: nowrap;
            margin-right: 10px;
            font-size: 16px;
        }

        .inline-label-input input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .inline-label-input input:focus {
            border-color: #3498db;
            outline: none;
        }

        /* 必填标记 */
        .required {
            color: #e74c3c;
            font-weight: bold;
            margin-right: 5px;
        }

        /* 表单分区 */
        .form-section {
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .form-section h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 18px;
            display: flex;
            align-items: center;
        }

        /* 文本区域 */
        textarea {
            width: 100%;
            height: 120px;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            resize: vertical;
            transition: border-color 0.3s;
        }

        textarea:focus {
            border-color: #3498db;
            outline: none;
        }

        /* 文件上传区域 */
        .file-upload {
            border: 2px dashed #bdc3c7;
            border-radius: 6px;
            padding: 25px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .file-upload:hover {
            border-color: #3498db;
            background: #f8fafc;
        }

        .hint {
            color: #7f8c8d;
            font-size: 14px;
            margin-top: 8px;
        }

        /* 图片预览 */
        .preview-container {
            display: flex;
            margin-top: 15px;
            position: relative;
            display: none;
            /* 默认隐藏 */
        }

        .preview-img {
            width: 180px;
            height: 180px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #eee;
        }

        .remove-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 28px;
            height: 28px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 提交按钮 */
        .form-submit {
            text-align: center;
            margin-top: 30px;
        }

        .submit-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 14px 30px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
            min-width: 200px;
        }

        .submit-btn:hover {
            background: #2980b9;
        }

        .submit-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }

        /* 错误提示 */
        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .inline-form-row {
                flex-direction: column;
                gap: 15px;
            }

            .inline-label-input {
                flex-direction: column;
                align-items: flex-start;
            }

            .inline-label-input input {
                width: 100%;
                margin-top: 5px;
            }

            .form-container {
                padding: 20px;
            }

            .preview-img {
                width: 150px;
                height: 150px;
            }
        }
    </style>

</body>
</html>